<template>
    <div>
      <button
        v-for="tab in Object.keys(tabs)"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <hr />
      <KeepAlive>
        <component :is="tabs[currentTab]" class="tab"></component>
      </KeepAlive>
    </div>
  </template>
  
  <script setup>
import { ref } from 'vue'
import game from './components/game.vue'
import todoList from './components/todo-list.vue'

const currentTab = ref('game')

const tabs = {
  game,
  todoList
}

</script>
  
<style scoped>
.tab-button {
  margin-top: 6px;
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  color: black;
}

.tab-button.active {
  color: black;
}

.tab {
  border: 2px solid #ccc;
  padding: 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>